<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#aaa{
				width: 200px;
				height: 200px;
				background: #CCCCCC;
			}
			#bbb{
				display: inline-block;
				width: 100px;
				height: 100px;
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<h3>事件属性，ie9 以下事件属性在 window.event 里</h3>
		<hr />
		<h3>事件原对象，在冒泡事件中，获取到点击的到底是父元素还是子元素</h3>
		<p>火狐：event.target</p>
		<p>IE：event.srcElement</p>
		<div id="aaa" onmouseenter="enter('red', event)">
			111
			<span id="bbb"></span>
		</div>
		
		<script type="text/javascript">
			var aaa = document.getElementById('aaa')
			aaa.onclick = function(event){
				var e = event || window.event
				console.log(e)
				console.log('鼠标点击坐标：' + e.clientX + '-' + e.clientY)
				
				// 事件原对象
				var target = e.target || e.srcElement
//				console.log(target)
			}
			
			function enter(color, e){
				e.target.style.color = 'red'
			}
		</script>
		
		
		
		
		
	</body>
</html>